<template>
    <div class="stepBox">
        <el-steps :active="active" finish-status="success" align-center>
            <el-step title="填写订单信息" />
            <el-step title="选择预约时间/咨询方式" />
            <el-step title="完成" />
        </el-steps>
        <div class="orderInfo" v-if="active==1">
            <easyForm :fieldList="fieldList" :model="model" :options="options" @submit="search" @reset="reset">
                
            </easyForm>
        </div>
        <div class="wrapper" v-if="active==2">
            <div class="wrapperInfo">
                <div class="flex_layout">
                    <div class="u_mr_50">咨询服务：{{model.value.gender}}</div>
                    <div class="u_mr_50">剩余咨询次数：</div>
                    <div class="u_mr_50">咨询师：</div>
                </div>
                <div class="flex_layout u_mt_15">
                    <div class="u_mr_50 flex_layout">
                        <div>预约时间：</div>
                        <el-input v-model="state.info.chooseTimeValue" placeholder="请选择预约时间" disabled style="width:400px"/>
                    </div>
                    <div class="u_mr_50 flex_layout">
                        <div>咨询方式：</div>
                         
                        <el-radio-group v-model="state.info.a.style">
                            <el-radio-button label="视频咨询" />
                            <el-radio-button label="语音"  disabled/>
                            <el-radio-button label="面对面" />
                        </el-radio-group>
                    </div>
                </div>
            </div>
            <div class="timeList u-color-danger textCenter u_mt_50" v-if="state.info.timeList.length == 0">该咨询师还没有排班</div>
            <div class="timeList" v-else>
                <div class="u_mb_20">选择预约时间</div>
                <div class="hscrollbarBox flex_layout">
                    <div class="leftBtn"><el-icon><DArrowLeft /></el-icon></div>
                    <div class="timeBox">
                        <el-scrollbar>
                        <ul class="flex_layout">
                            <li v-for="(item,num) in state.info.timeList" :key="item.id">
                                <h5 class="u_mb_20">{{item.date}}</h5>
                                <div class="flex_wrap div-table">
                                    <div class="div-td" :class="(state.info.nowsLi == index || state.info.nowsli2 == index ) && state.info.fthNum == num ?  'selectLi' : '' " v-for="(info,index) in item.time" :key="info" @click="chooseTime(num,index,item,info)">
                                        {{info.time}}
                                        <img v-if="(state.info.nowsLi == index || state.info.nowsli2 == index ) && state.info.fthNum == num" class="selectImg" src="../../assets/select.png" alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                        </el-scrollbar>
                    </div>
                    <div class="rightBtn"><el-icon><DArrowRight /></el-icon></div>
                </div>
                <ul></ul>

            </div>
        </div>
        <div class="takesure"  v-if="active==3">
            <div ><el-icon size="80px" color="#13ce66"><SuccessFilled /></el-icon></div>
            <p>操作成功</p>
            <div class="u_mt_30 u_mb_20">
                <img src="../../assets/1.png" alt="" class="qr-code">
            </div>
            <div class="u_f20 u_fb u_mb_10">
                请来访者使用微信扫描上方二维码，输入验证码后在页面下方点击确认订单！
            </div>
            <div class="u_f18">注：首次下单需提醒用户支付完成后在订单中补充预约信息</div>
        </div>
        <div class="footerBtn textCenter">
            
            <el-button  type="primary" @click="next" v-if="active == 1">下一步</el-button>
            <el-button  @click="prev" v-if="active == 2">上一步</el-button>
            <el-button type="primary" @click="commit" v-if="active == 2">提交</el-button>
            <el-button  @click="back" v-if="active == 3">返回</el-button>
            <el-button type="primary" @click="detail" v-if="active == 3">详情</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import easyForm from '@/components/formItem/index.vue'
import { ElMessageBox, ElScrollbar } from 'element-plus'
import { ref,reactive,computed, watch } from 'vue'
import { onBeforeRouteLeave, useRouter } from 'vue-router';
import {useStore} from "vuex";

const store = useStore();
const router = useRouter();

const active = ref(1)
const changeStyle = ref(1)
const constId = ref(1)

const checkPrice = (rule: any, value: any, callback: any) => {
    // 保留两位小数
    if (!value) callback(new Error('请输入支付金额'))
    var str = value
    var len1 = str.substr(0, 1)
    var len2 = str.substr(1, 1)
    var lenLast=str.substr(str.length-1)
    //如果第一位是0，第二位不是点，就用数字把点替换掉
    if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1)
    }
    //第一位不能是.
    if (len1 == ".") {
        str = ""
    }
    //最后一位不能是.
    if (str.length==8&&lenLast == ".") {
        str = ""
    }
    //限制只能输入一个小数点
    if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1)
        if (str_.indexOf(".") != -1) {
            str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
        }
    }
    //正则替换
    str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
    str = str.replace(/\.\d\d\d$/,'') // 小数点后只能输两位
    model.value.price = str;
    callback()

}
const consList = ref( [{
        label: '张三',
        time: '2022-12-01 14:56:28',
        content: '登录系统',
        value:1,
        state:0,
        times:0

      }, {
        label: '李四',
        content: '编辑用户xxx的信息',
        time: '2022-12-12 09:22:32',
        value:2,
        state:1,
        times:0
      }, {
        label: '王五',
        content: '修改咨询订单122222222',
        time: '2022-11-20 11:23:45',
        value:3,
        state:1,
        times:1
      }, {
        label: '赵六',
        content: '登录系统',
        time: '2022-12-01 14:56:28',
        value:4
      }])

const model = ref<Record<string, any>>({
        inlineFlag: false,
        phone: '13311111111',
        name: 'jack',
        num:'1',
        labelWidth: '160px',
        gender:1,
        price:'',
        paid:2,
        priceNeed:500
    })
const formList = ref({
    base: [
        { label: '注册手机号码：',field: 'phone', disabled:true },
        { label: '来访者姓名：', field: 'name', disabled:true },
        { label: '选择咨询师：', field: 'gender', type: 'select',rules: [{required: true, message: '请选择咨询师'}], options: {data: [{label:'张三',value:1}]}},
        { label: '选择咨询师服务：', field: 'gender', type: 'select', rules: [{required: true, message: '请选择咨询师服务'}],options: {data: [{label:'张三',value:1}]}},
        { label: '购买数量：', field: 'num', type: 'number', min:0,max:2 },
        { label: '订单是否已付款：', field: 'paid', type: 'radio',rules: [{required: true, message: '请选择订单是否已付款'}], options: { data: [{ label: '已付款', value: 1 }, { label: '未付款', value: 0 }] } },
        // 还有问题
        { label: '支付方式',showFlag:model.value.paid == 1? true:'hide', field: 'gender', type: 'select',rules: [{required: true, message: '请选择支付方式'}], options: {data: [{label:'微信支付',value:1},{label:'支付宝支付',value:2}]}},
        { label: '支付金额',showFlag:model.value.paid == 1? true:'hide', rules: [{required: true, message: '请输入支付金额',validator:checkPrice}], field: 'price',  },
        
        { label: '使用优惠券',showFlag:model.value.paid == 0? true:'hide', field: 'gender', type: 'select', options: {data: [{label:'不使用优惠券',value:1}]}},
        { label: '需支付金额',showFlag:model.value.paid == 0? true:'hide',field: 'priceNeed', disabled:true },

        { label: '是否必填个人信息：', field: 'gender', type: 'radio',rules: [{required: true, message: '请选择是否必填个人信息'}], options: { data: [{ label: '必填', value: 1 }, { label: '非必填', value: 0 }] } },

        
    ],
})

const fieldList: Form.FieldItem[] = formList.value.base;
// 参数配置 使用form组件


const options = {
    labelPosition: 'right',
    disabled: false,
    showResetButton: false,
    showDownloadButton: false,
    submitButtonText:''
};
const state :any = reactive({
    info:{
        a:{
            style:''
        },
        timeList:[
            {
                date:"02月03日",
                time:[{time:'00:10 - 00:30'},{time:'00:20 - 00:30'},{time:'00:30 - 00:30'},{time:'00:40 - 00:30'},{time:'00:50 - 00:30'},
{time:'06:00 - 00:30'},{time:'00:70 - 00:30'},{time:'00:80 - 00:30'},{time:'00:90 - 00:30'}]
            },
            {
                date:"02月04日",
                time:[{time:'00:10 - 00:30'},{time:'00:20 - 00:30'},{time:'00:30 - 00:30'},{time:'00:40 - 00:30'},{time:'00:50 - 00:30'},
{time:'06:00 - 00:30'},{time:'00:70 - 00:30'},{time:'00:80 - 00:30'},{time:'00:90 - 00:30'},{time:'00:10 - 00:30'},{time:'00:20 - 00:30'},{time:'00:30 - 00:30'},{time:'00:40 - 00:30'},{time:'00:50 - 00:30'},
{time:'06:00 - 00:30'},{time:'00:70 - 00:30'},{time:'00:80 - 00:30'},{time:'00:90 - 00:30'}]
            },
            {
                date:"02月05日",
                time:[{time:'00:10 - 00:30'},{time:'00:20 - 00:30'},{time:'00:30 - 00:30'},{time:'00:40 - 00:30'},{time:'00:50 - 00:30'},
{time:'06:00 - 00:30'},{time:'00:70 - 00:30'},{time:'00:80 - 00:30'},{time:'00:90 - 00:30'}]
            }
        ],
        chooseTimeValue: '',
        fthNum:NaN,
        nowsLi: NaN,
        nowsli2: NaN,
        clickNum: 0
    }
});
const next = () => {
  if (active.value++ > 2) active.value = 0
}
const prev = () => {
    if(active.value-- <1) active.value = 1
}

const commit = () => {
    // 提交函数成功时
    if (active.value++ > 2) active.value = 0
}
const chooseTime = (num:number, index:number, item:any) => {
    if(state.info.fthNum != num){
        state.info.clickNum=0;
    }
    if ( state.info.clickNum+1 == 1) {
        state.info.fthNum = num;
        state.info.clickNum++;
        state.info.nowsli2 = index+1;
        state.info.nowsLi = index;
        state.info.chooseTimeValue = item.date +' '+  item.time[index].time + '、' + item.date +' '+ item.time[index+1].time
    }  else if ( state.info.clickNum+1 == 2) {
        if(index == 0){
            state.info.fthNum = NaN;
            state.info.clickNum = 0;
            state.info.nowsli2 = NaN;
            state.info.nowsLi = NaN;
            state.info.chooseTimeValue = ''
        }else{
            state.info.fthNum = num;
            state.info.nowsli2 = index - 1;
            state.info.clickNum++;
            state.info.nowsLi = index;
            state.info.chooseTimeValue = item.date +' '+  item.time[index-1].time + '、' + item.date +' '+ item.time[index].time
        }
        
    } else if( state.info.clickNum+1 == 3) {
        state.info.fthNum = NaN;
        state.info.clickNum = 0;
        state.info.nowsli2 = NaN;
        state.info.nowsLi = NaN;
        state.info.chooseTimeValue = ''
    } 
}
const back = () => {
    let tagsItem = {
        "component": () => import("@/views/dataMana/userMana.vue"),
            "path": "/userMana",
            "name":"userMana",
            "meta":{
                "icon": "Monitor",
                "name": "用户管理",
            },
    }
    store.dispatch("ADD_TAG", tagsItem)
    router.push({name: 'userMana'});

}
const detail = () =>{
    let tagsItem = {
        "component": () => import("@/views/orderMana/consultingOrder.vue"),
            "path": "/consultingOrder",
            "name":"consultingOrder",
            "meta":{
                "icon": "Monitor",
                "name": "咨询订单",
            },
    }
    store.dispatch("ADD_TAG", tagsItem)
    router.push({name: 'consultingOrder'});
}
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();

const editFlag = ref(false);
watch(model, (newVal, oldVal) => {
    editFlag.value = true
})
watch(state.info,(newVal, oldVal) => {
    editFlag.value = true
})
onBeforeRouteLeave((to, from, next) => {
    if(editFlag.value){
        ElMessageBox.confirm(
        '当前页面修改数据为保存，确定离开吗?',
        '温馨提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
        .then(() => {
            next()
        })
        .catch(() => {
            return false;
        })
    }else{
        next()
    }
})
</script>

<style lang="scss" scoped>
.stepBox{
    margin-top: 30px;
    .orderInfo{
        width: 36%;
        margin: 50px auto;
        p{
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 30px;
            span{
                font-weight: 400;
            }
            span.radioBox{
                display: inline-block;
                width: 100px;
            }
        }
    }
    .wrapper{
        width: 80%;
        margin: 50px auto;
        .wrapperInfo{
            width: 70%;
            margin: auto;
        }
        .timeList{
            width: 100%;
        }
        .hscrollbarBox{
            .leftBtn{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin: auto 30px auto 0 ;
                line-height: 100%;
            }
            .timeBox{
                width: calc(100% - 120px);
                ul{
                    padding: 20px;
                    box-sizing: border-box;
                    li{
                        flex-shrink: 0;
                        align-items: center;
                        justify-content: center;
                        margin-right: 20px;
                        .selectLi{
                            border: 1px solid #4b96f9!important
                        }
                        .selectImg{
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 18px;
                            height: 17px;
                        }
                    }

                }
            }
            .rightBtn{
                
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin: auto 0 auto 30px;
                line-height: 100%;
            }
        }
    }
    .takesure{
        text-align: center;
        margin: 30px auto 15px;
        p{
            font-size: 28px;
            font-weight: bolder;
        }
        .qr-code{
            width: 250px;
            height: 250px;

        }
    }
    .footerBtn{
        margin-top: 100px;
        text-align: center;
        button{
            width: 400px;
        }
    }
}
</style>